<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>

  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header><h1 >Header.com</h1></header>
    <div class="left-sidebar" >Left Sidebar</div>
    <main >
        <p><a href="http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html">只要一行代码，实现五种 CSS 经典布局</a></p>
        <p>核心代码是grid-template属性那一行，它是两个属性grid-template-rows（垂直方向）和grid-template-columns（水平方向）的简写形式。</p>
        <p>grid-template-rows和grid-template-columns都是auto 1fr auto，就表示页面在垂直方向和水平方向上，都分成三个部分。</p>
        <p>第一部分（页眉和左边栏）和第三部分（页脚和右边栏）都是本来的内容高度（或宽度），</p>
        <p>第二部分（内容区和主栏）占满剩余的高度（或宽度）。</p>
    </main>
    <div class="right-sidebar" >Right Sidebar</div>
    <footer >Footer Content — Header.com 2020</footer>
</body>
</html>